只使用一个html元素绘制图形,部分图形需要浏览器支持
正方形 Square
#square {
width: 100px;
height: 100px;
background: dodgerblue;
}
长方形 Rectangle
#rectangle {
width: 200px;
height: 100px;
background: dodgerblue;
}
圆形 Circle
#circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: dodgerblue;
}
椭圆形 Oval
#oval {
width: 200px;
height: 100px;
border-radius: 50%;
background: dodgerblue;
}
三角形向上 Triangle Up
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid dodgerblue;
}
三角形向下 Triangle Down
#triangle-down {
width: 0;
height: 0;
border-top: 100px solid dodgerblue;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
三角形向左 Triangle Left
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid dodgerblue;
border-bottom: 50px solid transparent;
}
三角形向右 Triangle Right
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid dodgerblue;
border-bottom: 50px solid transparent;
}
三角形左上角 Triangle Top Left
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid dodgerblue;
border-right: 100px solid transparent;
}
三角形右上角 Triangle Top Right
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid dodgerblue;
border-left: 100px solid transparent;
}
三角形左下角 Triangle Bottom Left
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid dodgerblue;
border-right: 100px solid transparent;
}
三角形右下角 Triangle Bottom Right
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid dodgerblue;
border-left: 100px solid transparent;
}
曲箭头 Curved Tail Arrow
#curvedarrow {
position: relative;
width: 0;
height: 0;
margin-left: 20px;
border-top: 9px solid transparent;
border-right: 9px solid dodgerblue;
transform: rotate(10deg);
}
#curvedarrow:after {
content: "";
position: absolute;
top: -12px;
left: -9px;
width: 12px;
height: 12px;
border: 0 solid transparent;
border-top: 3px solid dodgerblue;
border-radius: 20px 0 0 0;
transform: rotate(45deg);
}
梯形 Trapezoid
#trapezoid {
width: 100px;
height: 0;
border-bottom: 100px solid dodgerblue;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
平行四边形 Parallelogram
#parallelogram {
width: 150px;
height: 100px;
margin-left: 20px;
transform: skew(20deg);
background: dodgerblue;
}
星形(6点) Star (6-points)
#star-six {
position: relative;
width: 0;
height: 0;
margin-bottom: 40px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid dodgerblue;
}
#star-six:after {
content: "";
position: absolute;
top: 30px;
left: -50px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid dodgerblue;
}
星形(5点) Star (5-points)
#star-five {
display: block;
position: relative;
width: 0px;
height: 0px;
margin: 50px 0;
border-right: 50px solid transparent;
border-bottom: 35px solid dodgerblue;
border-left: 50px solid transparent;
color: dodgerblue;
transform: rotate(35deg);
}
#star-five:before {
content: '';
display: block;
position: absolute;
top: -22.5px;
left: -32.5px;
height: 0;
width: 0;
border-bottom: 40px solid dodgerblue;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
transform: rotate(-35deg);
}
#star-five:after {
content: '';
display: block;
position: absolute;
top: 1.5px;
left: -52.5px;
width: 0px;
height: 0px;
border-right: 50px solid transparent;
border-bottom: 35px solid dodgerblue;
border-left: 50px solid transparent;
color: dodgerblue;
transform: rotate(-70deg);
}
五角形 Pentagon
#pentagon {
position: relative;
width: 54px;
margin-top: 40px;
border-width: 50px 18px 0;
border-style: solid;
border-color: dodgerblue transparent;
box-sizing: content-box;
}
#pentagon:before {
content: "";
position: absolute;
top: -85px;
left: -18px;
height: 0;
width: 0;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent dodgerblue;
}
六角形 Hexagon
#hexagon {
position: relative;
width: 100px;
height: 55px;
margin: 40px 0;
background: dodgerblue;
}
#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid dodgerblue;
}
#hexagon:after {
content: "";
position: absolute;
left: 0;
bottom: -25px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid dodgerblue;
}
八角形 Octagon
#octagon {
position: relative;
width: 100px;
height: 100px;
background: dodgerblue;
box-sizing: content-box;
}
#octagon:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 42px;
height: 0;
border-bottom: 29px solid dodgerblue;
border-left: 29px solid white;
border-right: 29px solid white;
box-sizing: content-box;
}
#octagon:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 42px;
height: 0;
border-top: 29px solid dodgerblue;
border-left: 29px solid white;
border-right: 29px solid white;
box-sizing: content-box;
}
心形 Heart
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
border-radius: 50px 50px 0 0;
background: dodgerblue;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
#heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
无限形 Infinity
#infinity {
position: relative;
width: 212px;
height: 100px;
box-sizing: content-box;
}
#infinity:before,
#infinity:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 20px solid dodgerblue;
border-radius: 50px 50px 0 50px;
transform: rotate(-45deg);
box-sizing: content-box;
}
#infinity:after {
left: auto;
right: 0;
border-radius: 50px 50px 50px 0;
transform: rotate(45deg);
}
菱形 Diamond
#diamond {
position: relative;
top: -50px;
width: 0;
height: 0;
margin: 20px;
border: 50px solid transparent;
border-bottom-color: dodgerblue;
}
#diamond:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: dodgerblue;
}
菱形(窄) Diamond Narrow
#diamond-narrow {
position: relative;
top: -50px;
width: 0;
height: 0;
margin: 20px;
border: 50px solid transparent;
border-bottom: 70px solid dodgerblue;
}
#diamond-narrow:after {
content: '';
position: absolute;
top: 70px;
left: -50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid dodgerblue;
}
菱形(盾) Diamond Shield
#diamond-shield {
position: relative;
top: -50px;
width: 0;
height: 0;
margin-bottom: 20px;
border: 50px solid transparent;
border-bottom: 20px solid dodgerblue;
}
#diamond-shield:after {
content: '';
position: absolute;
top: 20px;
left: -50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid dodgerblue;
}
钻石 Diamond
#cut-diamond {
position: relative;
width: 50px;
height: 0;
margin: 20px 0 80px 0;
border-style: solid;
border-color: transparent transparent dodgerblue transparent;
border-width: 0 25px 25px 25px;
box-sizing: content-box;
}
#cut-diamond:after {
content: "";
position: absolute;
top: 25px;
left: -25px;
width: 0;
height: 0;
border-style: solid;
border-color: dodgerblue transparent transparent transparent;
border-width: 70px 50px 0 50px;
}
蛋形 Egg
#egg {
display: block;
width: 120px;
height: 150px;
margin: 20px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
background-color: dodgerblue;
}
食豆小子 Pac-Man
#pacman {
width: 0px;
height: 0px;
margin: 20px;
border-right: 60px solid transparent;
border-top: 60px solid dodgerblue;
border-left: 60px solid dodgerblue;
border-bottom: 60px solid dodgerblue;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
}
谈话泡 Talk Bubble
#talkbubble {
position: relative;
width: 120px;
height: 80px;
margin: 30px;
border-radius: 10px;
background: dodgerblue;
}
#talkbubble:before {
content: "";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid dodgerblue;
border-bottom: 13px solid transparent;
}
爆炸(12点) Burst(12-points)
#burst-12 {
position: relative;
width: 80px;
height: 80px;
margin: 20px;
text-align: center;
background: dodgerblue;
}
#burst-12:before,
#burst-12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: dodgerblue;
}
#burst-12:before {
transform: rotate(30deg);
}
#burst-12:after {
transform: rotate(60deg);
}
爆炸(8点) Burst(8-points)
#burst-8 {
position: relative;
width: 80px;
height: 80px;
margin: 20px;
text-align: center;
background: dodgerblue;
transform: rotate(20deg);
}
#burst-8:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: dodgerblue;
transform: rotate(135deg);
}
太极 Tai Chi
#yin-yang {
position: relative;
width: 96px;
height: 48px;
background: white;
border-width: 2px 2px 50px 2px;
border-style: solid;
border-color: dodgerblue;
border-radius: 100%;
box-sizing: content-box;
}
#yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 12px;
height: 12px;
border: 18px solid dodgerblue;
border-radius: 100%;
background: white;
box-sizing: content-box;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 12px;
border: 18px solid white;
border-radius: 100%;
background: dodgerblue;
box-sizing: content-box;
}
徽章 Badge Ribbon
#badge-ribbon {
position: relative;
width: 100px;
height: 100px;
margin-bottom: 40px;
border-radius: 50px;
background: dodgerblue;
}
#badge-ribbon:before,
#badge-ribbon:after {
content: '';
position: absolute;
top: 70px;
left: -10px;
border-bottom: 70px solid dodgerblue;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
transform: rotate(-140deg);
}
#badge-ribbon:after {
left: auto;
right: -10px;
transform: rotate(140deg);
}
太空侵略者 Space Invader
#space-invader {
width: 1em;
height: 1em;
margin: 70px 20px 90px 85px;
overflow: hidden;
background: dodgerblue;
box-shadow: 0 0 0 1em dodgerblue,
0 1em 0 1em dodgerblue,
-2.5em 1.5em 0 .5em dodgerblue,
2.5em 1.5em 0 .5em dodgerblue,
-3em -3em 0 0 dodgerblue,
3em -3em 0 0 dodgerblue,
-2em -2em 0 0 dodgerblue,
2em -2em 0 0 dodgerblue,
-3em -1em 0 0 dodgerblue,
-2em -1em 0 0 dodgerblue,
2em -1em 0 0 dodgerblue,
3em -1em 0 0 dodgerblue,
-4em 0 0 0 dodgerblue,
-3em 0 0 0 dodgerblue,
3em 0 0 0 dodgerblue,
4em 0 0 0 dodgerblue,
-5em 1em 0 0 dodgerblue,
-4em 1em 0 0 dodgerblue,
4em 1em 0 0 dodgerblue,
5em 1em 0 0 dodgerblue,
-5em 2em 0 0 dodgerblue,
5em 2em 0 0 dodgerblue,
-5em 3em 0 0 dodgerblue,
-3em 3em 0 0 dodgerblue,
3em 3em 0 0 dodgerblue,
5em 3em 0 0 dodgerblue,
-2em 4em 0 0 dodgerblue,
-1em 4em 0 0 dodgerblue,
1em 4em 0 0 dodgerblue,
2em 4em 0 0 dodgerblue;
}
TV形 TV Screen
#tv {
position: relative;
width: 150px;
height: 100px;
margin: 20px;
text-align: center;
text-indent: .1em;
background: dodgerblue;
border-radius: 50% / 10%;
color: white;
}
#tv:before {
content: '';
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -5%;
border-radius: 5% / 50%;
background: inherit;
}
臂章 Chevron
#chevron {
position: relative;
width: 150px;
height: 60px;
margin: 20px;
}
#chevron:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 51%;
height: 100%;
background: dodgerblue;
transform: skew(0deg, 6deg);
}
#chevron:after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: dodgerblue;
transform: skew(0deg, -6deg);
}
放大镜 Magnifying Glass
#magnifying-glass {
display: inline-block;
position: relative;
width: 0.4em;
height: 0.4em;
margin: 0.1em;
border: 0.1em solid dodgerblue;
border-radius: 0.35em;
font-size: 10em;
box-sizing: content-box;
}
#magnifying-glass::before {
content: "";
display: inline-block;
position: absolute;
right: -0.25em;
bottom: -0.1em;
width: 0.35em;
height: 0.08em;
border-width: 0;
background: dodgerblue;
transform: rotate(45deg);
}
月亮 Moon
#moon {
width: 80px;
height: 80px;
margin: 20px;
border-radius: 50%;
box-shadow: 15px 15px 0 0 dodgerblue;
}
旗帜 Flag
#flag {
position: relative;
width: 110px;
height: 56px;
margin: 20px;
padding-top: 15px;
font-size: 11px;
letter-spacing: 0.2em;
text-align: center;
text-transform: uppercase;
color: white;
background: dodgerblue;
box-sizing: content-box;
}
#flag:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-bottom: 13px solid white;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
}
锥体 Cone
#cone {
width: 0;
height: 0;
margin: 20px;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-top: 100px solid dodgerblue;
border-radius: 50%;
}
十字架 Cross
#cross {
position: relative;
width: 20px;
height: 100px;
margin: 20px 50px;
background: dodgerblue;
}
#cross:after {
content: "";
position: absolute;
top: 40px;
left: -40px;
width: 100px;
height: 20px;
background: dodgerblue;
}
基地 Base
#base {
display: inline-block;
position: relative;
width: 100px;
height: 55px;
margin-left: 20px;
margin-top: 35px;
background: dodgerblue;
}
#base:before {
content: "";
position: absolute;
width: 0;
height: 0;
top: -35px;
left: 0;
border-bottom: 35px solid dodgerblue;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
指针 Pointer
#pointer {
position: relative;
width: 200px;
height: 40px;
margin: 20px;
background: dodgerblue;
}
#pointer:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid white;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
#pointer:before {
content: "";
position: absolute;
right: -20px;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid dodgerblue;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
原文链接:http://www.bestvist.com/p/58
原文有效果更直观呦
GitHub地址 欢迎star ^ _ ^
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。